<template>
 <!-- 活动入口 -->
  <div class="active-content">
		<div class="activity-wrap">
			<div class="left-content">
				<div class="top">
					<img src="/static/home/huang.png" class="bg">
					<div class="content">
						<div class="left-desc">
							<div class="h1">
								肉食主义
							</div>
							<div class="desc">
								海鲜肉类吃不停
							</div>
						</div>
						<div class="right-show">
							<img src="/static/home/1.png">
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="left">
						<img src="/static/home/zi.png" class="bg">
						<div class="content">
							<div class="h1">
								家电优惠
							</div>
							<img src="/static/home/2.png">
							<div class="title">
								全场两件三折
							</div>
						</div>
					</div>
					<div class="right">
						<img src="/static/home/lv.png" class="bg">
						<div class="content">
							<div class="h1">
								邀请有礼
							</div>
							<div class="h2">
								呼朋唤友一起购
							</div>
							<img src="/static/home/3.png">
						</div>
					</div>
				</div>
			</div>
			<div class="right-content">
				<img src="/static/home/lan.png"  class="bg">
				<div class="content">
					<div class="h1">
						新款衣帽
					</div>
					<div class="h2">
						秋季新款时尚奢华
					</div>
					<img src="/static/home/4.png">
					<div class="btn">
						马上去看看>>
					</div>
				</div>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  name: 'RubikCubeStyle1',
  data() {
    return {
    
    }
  },
  computed: {
    
  },
  mounted() {
    
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  // 活动入口
  .active-content {
    background: #fff;
    .activity-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 358px;
      margin: 0 auto;
      padding: 5px 0 25px;
      .left-content {
        height: 205px;
        width: 205px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          height: 93px;
          width: 100%;
          position: relative;
          .bg {
            width: 100%;
            height: 100%;
          }
          .content {
            position: absolute;
            top: 0;
            left: 14px;
            right: 14px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .h1 {
              font-size: 15px;
              color: #fff;
              font-weight: 700;
            }
            .desc {
              font-size: 11px;
              color: #fff;
            }
            .left-desc {
              margin-top: -23px;
            }
            .right-show {
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 75px;
                height: 70px;
              }
            }
            
          }
        }
        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            width: 100px;
            height: 101px;
            position: relative;
            .bg {
              width: 100%;
              height: 100%;
            }
            .content {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              .h1 {
                color: #fff;
                font-size: 15px;
                font-weight: 700;
              }
              .title {
                font-size: 11px;
                color: #fff;
              }
              img {
                width: 53px;
                height: 32px;
              }
            }
          }
          .right {
            width: 100px;
            height: 101px;
            position: relative;
            .bg {
              width: 100%;
              height: 100%;
            }
            .content {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .h1 {
                color: #fff;
                font-size: 15px;
                font-weight: 700;
                justify-content: center;
              }
              .h2 {
                font-size: 11px;
                color: #fff;
              }
              img {
                width: 50px;
                height: 44px;
                margin-top: 8px;
              }
            }
          }
        }
      }
      .right-content {
        width: 145px;
        height: 205px;
        position: relative;
        .bg {
          width: 100%;
          height: 100%;
        }
        .content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          .h1 {
            font-size: 15px;
            color: #fff;
            font-weight: 700;
          }
          .h2 {
            font-size: 11px;
            color: #fff;
          }
          .btn {
            width: 89px;
            height: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-radius: 23px;
            font-size: 11px;
            color: #1456fc;
          }
          img {
            width: 93px;
            height: 88px;
            margin-top: 17px;
            margin-bottom: 11px;
          }
        }
      }
    }
  }
  
</style>